<template>
  <div class="dashboard-container">
    <div class="filter-container">
      <el-button v-permission="['admin']" type="primary" icon="el-icon-paperclip" @click="dialogFormVisible = true">生成密钥</el-button>
      <el-link v-permission="['cashier']" :href="download.url" type="warning">下载秘钥</el-link>
      &nbsp;&nbsp;&nbsp;
      <el-switch
        v-model="listQuery.bind"
        active-value="0"
        :inactive-value="null"
        active-text="只看未绑定"
        inactive-text="全部"
        @change="handleFilter"
      />
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      element-loading-text="Loading"
    >
      <el-table-column align="center" label="号牌" prop="num" width="90" />
      <el-table-column align="center" label="绑定" prop="is_bind" width="120">
        <template slot-scope="scope">
          <el-tag :type="!scope.row.is_bind ? 'info' : ''">
            {{ scope.row.is_bind ? '已绑定' : '未绑定' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="密钥" prop="key" width="370" />
    </el-table>

    <div v-show="total > 0" class="pagination-container">
      <el-pagination background :current-page="listQuery.page" :page-sizes="[15, 20, 30]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

    <el-dialog title="生成密钥" :visible.sync="dialogFormVisible">
      <el-form ref="keyForm" :model="form" label-position="top" :rules="rules" style="max-width: 500px;">
        <el-form-item label="请输入号牌起始范围：" prop="range">
          <el-col :span="11">
            <el-input v-model.number="form.start" :min="max + 1" type="number" />
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-input v-model.number="form.end" :min="max + 1" type="number" />
          </el-col>
        </el-form-item>
        <p class="tip">起始值不得低于已生成的号牌最大号: {{ max }}</p>
        <el-form-item>
          <el-button type="primary" size="medium" :loading="btnLoading" @click="handleSubmit">生成秘钥</el-button>
        </el-form-item>
      </el-form>
      <div class="download">
        <p v-show="!!download.url" class="tip">点击下载</p>
        <a :href="download.url">{{ download.name }}</a>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { exportKeys, getKeys, downloadKeys } from '@/api/admin'

export default {
  data () {
    var checkRange = (rule, value, callback) => {
      if (this.form.start === '' || this.form.end === '' || this.form.end < this.form.start) {
        return callback(new Error('请填写正确的号牌范围'))
      } else {
        callback()
      }
    }
    return {
      listQuery: {
        page: 1,
        limit: 20,
        bind: ''
      },
      list: [],
      total: 0,
      showUnbind: false,
      listLoading: true,
      dialogFormVisible: false,
      download: {},
      form: {
        start: this.$store.state.admin.max + 1,
        end: ''
      },
      rules: {
        range: [{ validator: checkRange, trigger: 'blur' }]
      },
      btnLoading: false
    }
  },
  computed: {
    ...mapGetters([
      'max'
    ])
  },
  mounted () {
    this.fetchData()
    this.fetchDown()
  },
  methods: {
    fetchDown () {
      downloadKeys().then(res => {
        if (res.data.url) {
          this.download = res.data
        }
      }).catch(err => {
        console.log(err)
      })
    },
    fetchData () {
      this.listLoading = true
      getKeys(this.listQuery).then(res => {
        this.list = res.data.list
        this.total = res.data.total
        this.listLoading = false
      }).catch(err => {
        console.log(err)
        this.listLoading = false
      })
    },
    handleSubmit () {
      this.$refs['keyForm'].validate((valid) => {
        if (valid) {
          this.btnLoading = true
          exportKeys(this.form).then(res => {
            this.btnLoading = false
            this.download = res.data
            this.$store.commit('admin/SET_MAX', res.data.max)
            this.form.start = res.data.max + 1
            this.form.end = ''
            this.$notify({
              message: res.msg,
              type: 'success',
              duration: 2000
            })
            this.fetchData()
          }).catch(err => {
            this.btnLoading = false
            console.log(err)
          })
        }
      })
    },
    handleFilter () {
      this.listQuery.page = 1
      this.fetchData()
    },
    handleSizeChange (val) {
      this.listQuery.limit = val
      this.fetchData()
    },
    handleCurrentChange (val) {
      this.listQuery.page = val
      this.fetchData()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
    .el-table {
      margin-bottom: 20px;
    }
    .line {
      text-align: center;
    }
    .tip {
      font-size: 14px;
      color: #777;
    }
    .download {
      a {
        color: #009788;
        font-size: 14px;
        line-height: 1.6;
      }
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
